<template>
  <div>
   <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>订单管理</el-breadcrumb-item>
     <el-breadcrumb-item>订单列表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片 -->
     <el-card>
       <el-row>
         <el-col :span='6'>
             <el-input placeholder="请输入内容" v-model="getorderparams.query" clearable class="input-with-select" @clear='getordersinfo()'>
            <el-button slot="append" icon="el-icon-search" @click="getordersinfo()"></el-button>
             </el-input>
         </el-col>
       </el-row>
       <el-row>
         <el-row>
           <el-table
            :data="ordersinfo"
            border
            stripe
            style="width: 100%">
            <el-table-column type='index' label='#'></el-table-column>
             <el-table-column prop="order_number" label="订单编号" ></el-table-column>
             <el-table-column prop="order_price" label="订单价格" width="80"></el-table-column>
             <el-table-column  label="是否付款" width="80">
               <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.order_pay == '1'">已付款</el-tag>
                  <el-tag type="danger" v-else>未付款</el-tag>
               </template>
             </el-table-column>
             <el-table-column prop="is_send" label="是否发货" width="80"></el-table-column>
             <el-table-column  label="下单时间" width="180">
               <template slot-scope="scope">
                  {{scope.row.create_time | date}}
               </template>
             </el-table-column>
             <el-table-column  label="操作" width="180">
               <template slot-scope="scope">
                 <el-button type="primary" icon="iconfont icon-bianji" size='mini' @click="editaddres(scope.row)"></el-button>
                 <el-button type="success"  icon="iconfont icon-zuobiao" size='mini' @click='viewinfo(scope.row)'></el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-row>
       </el-row>
       <el-row>
         <el-col> 
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="getorderparams.pagenum"
            :page-sizes="[5, 8, 10]"
            :page-size="getorderparams.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
             background>
           </el-pagination>
         </el-col>
       </el-row>
     </el-card>
     <!-- 编辑地址对话框 -->
     <el-dialog
    title="修改地址"
    :visible.sync="addressdialog"
    width="50%">
    <el-form :model='addressinfo.address1' :rules='rules'>
      <el-form-item label='省市区/线' prop='address1' label-width='100px'>
          <el-cascader
          v-model="addressarr"
          :options="citydate"
        @change="handleChange"></el-cascader>
      </el-form-item>
      <el-form-item label='详细地址' prop='address2' label-width='100px'>
          <el-input v-model='addressinfo.address2'/>
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addressdialog = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 查看物流进度条对话框 -->
<el-dialog
  title="查看物流进度"
  :visible.sync="viewexpressdialog"
  width="50%">
    <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(item, index) in viewexpressinfo"
      :key="index"
      :timestamp="item.time">
      {{item.context}}
    </el-timeline-item>
  </el-timeline>
  <span slot="footer" class="dialog-footer">
    <el-button @click="viewexpressdialog = false">取 消</el-button>
    <el-button type="primary" @click="viewexpressdialog = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
 import citydate from './citydata'
  export default {
   name:'order',
   data () {
     return {
       getorderparams:{
         query:'',
         pagenum:1,
         pagesize:10,

       },
       ordersinfo:[],
       total:0,
       //修改地址对话框显示隐藏
       addressdialog:false,
       //物流进度对话框显示隐藏
       viewexpressdialog:false,
       addressinfo:{
         address1:'',
         address2:''
       },
       //排序方向
       reverse:true,
       //物流信息,
       viewexpressinfo:[],
       addressarr:[],
       citydate,
       rules:{
         address1:[
          { required: true, message: '请选择地址', trigger: 'blur' },
         ],
         address2:[
          { required: true, message: '请填写详细地址', trigger: 'blur' },
         ],
       }
     }
   },
   filters: {
     date(nowdate){
      const date =new Date(nowdate)
       const y = date.getFullYear()
       const m = (date.getMonth() + 1 + '').padStart(2,'0')
       const d = (date.getDay() + '').padStart(2,'0')


       const hh =(date.getHours() + '').padStart(2,'0')
       const mm =(date.getMinutes() + '').padStart(2,'0')
       const ss =(date.getSeconds() + '').padStart(2,'0')

       return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
     }
   },
   created () {
     this.getordersinfo()
   },
   methods: {
   async  getordersinfo(){
     const result= await this.$http.get('orders',{params : this.getorderparams})
     console.log(result)
     if(result.data.meta.status !=200){
       return  this.$message({showClose: true,message: `获取商品订单失败`,type: 'error'})
     }
     this.ordersinfo=result.data.data.goods
     this.total=result.data.data.total
   },
   handleSizeChange(val){
      this.getorderparams.pagesize=val
      this.getordersinfo()
   },
   handleCurrentChange(val){
     this.getorderparams.pagenum=val
     this.getordersinfo()
   },
   //地址填写
   editaddres(userinfo){
     this.addressdialog=true
   },
   handleChange(){},
   //查看物流信息
   async viewinfo(userinfo){
       const result =await this.$http.get(`/kuaidi/1106975712662`)
       if(result.data.meta.status !=200){
         return this.$message({showClose: true,message: `获取物流信息失败`,type: 'error'})
       }
       this.viewexpressinfo=result.data.data
       this.viewexpressdialog=true
   }
   
   }
  }
</script>

<style lang="less" scoped>
   .el-card{
     margin-top: 10px;
   }
   .el-table{
     margin-top: 10px;
   }
   .el-pagination{
     margin-top: 10px;
   }
   .el-cascader{
     width: 100%;
   }
</style>